<template>
    <div>
        <!--<transition enter-class="vDialogOpen">-->
        <div dialog="vDialog" tabindex="-1" v-show="true"
             :class="[dialogClass, toastPosition]"
             :style="[{'z-index':dialogZIndex},dialogSize]" @click.self="outsideClick" >
            <div class="modal-dialog" role="document" :style="{width:dlg.width+'px',height:dlg.height+'px',top:dialogTop+'px'}">
                <div :class="[{'modal-content': true}, dialogContentClass]">
                    <div class="modal-header vDialogHeader" ref="dialogHeader" v-show="dlg.title !== false">
                        <button type="button" class="vDialogCloseButton" v-show="dlg.dialogCloseButton" @click="closeDialog(true)"><i class="vDialogFont vDialog-close"></i></button>
                        <button type="button" class="maximize vDialogMaxButton" v-show="dlg.dialogMaxButton" @click="dialogMax" >
                            <i :class="[{vDialogFont:true}, dialogClass.maximize?'vDialog-restore':'vDialog-max']"></i>
                        </button>
                        <h3 class="vDialogHeaderLabel">{{dlg.title}}</h3>
                    </div>
                    <div class="modal-body vDialogBody" :style="{height:bodyHeight+'px'}" >
                        <!-- Modal mode content -->
                        <component v-if="dlg.type === 'modal'" :is="dlg.component" :params="dlg.params"></component>

                        <!-- Alert mode content -->
                        <div :class="[ {vDialogAlert:true}, dlg.iconClassName ]" v-else-if="dlg.type === 'alert'">
                            <div class="messageContent" v-html="dlg.message"></div>
                            <div class="vDialogButtons">
                                <button type="button" class="vDialogOk" @click="closeDialog(false)">{{dlg.i18n.btnOk}}</button>
                                <button type="button" class="vDialogCancel" @click="closeDialog(true)" v-show="dlg.messageType === 'confirm' || dlg.messageType === 'inputConfirm'">{{dlg.i18n.btnCancel}}</button>
                            </div>
                        </div>

                        <!-- Mask mode content -->
                        <div class="vDialogMaskContent" v-else-if="dlg.type === 'mask'" >
                            <div class="vDialogTimer"></div>
                            <div class="messageContent">{{dlg.message}}</div>
                        </div>

                        <!-- Toast mode content -->
                        <div :class="[ {vDialogToastContent:true}, dlg.contentClass]" v-else-if="dlg.type === 'toast'" >
                            <button type="button" class="vDialogToastClose" v-show="dlg.dialogCloseButton" @click="closeDialog(false)">×</button>
                            <div class="vDialogToastIcon"><i :class="[{vDialogFont: true},dlg.iconClassName]"></i></div>
                            <div class="messageContent">
                                <h3>{{dlg.titleStr}}</h3>
                                <p v-html="dlg.message"></p>
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer vDialogFooter hide">&nbsp;</div>
                </div>
            </div>
        </div>
        <!--</transition>-->
        <div class="vDialog-backdrop" :style="{'z-index':backdropZIndex}" v-if="dlg.type !== 'toast' && dlg.backdrop"></div>
    </div>
</template>

<script>
    import constant from './vDialogConstants';
    let {dialogDefaults, messageTypes, alertIconClass, toastConstants, languages, commonConstants} = constant;
    export default {
        name: "v-dialogs-content",
        props: ['setting', 'dialogIndex'],
        data(){
            return {
                dlg: this.setting,
                bodyHeight: 50,
                dialogTop: 0,
                dialogZIndex: 0,
                backdropZIndex: 0,
                dialogSize: {},
                dialogClass:{
                    vDialog: true,
                    vDialogToast: this.setting.type === 'toast',
                    maximize: false,
                    vDialogOpen: false,
                    vDialogBuzzOut: false

                },
                dialogContentClass: {
                    vDialogErrorBg: false,
                    vDialogWarnBg: false,
                    vDialogSuccessBg: false
                },
                toastPosition: this.setting.type === 'toast'?this.setting.position:''
            };
        },
        methods:{
            /**
             * Close current dialog
             * @param trigger [boolean] whether close dialog and trigger callback function
             */
            closeDialog(trigger){
                //console.log(typeof trigger);
                this.setting.cancel = trigger;
                this.$emit('close',this.setting.dialogKey);
            },
            /**
             * dialog max size
             * work on modal mode
             */
            dialogMax(){
                this.dialogClass.maximize = !this.dialogClass.maximize;
                this.adjust();
            },
            /**
             * backdrop click animate
             */
            outsideClick(){
                var that = this;
                this.dialogClass.vDialogBuzzOut = true;
                setTimeout(function(){
                    that.dialogClass.vDialogBuzzOut = false;
                }, 1000);
            },
            /**
             * adjust position and size
             */
            adjust(){
                if(this.dlg.title){
                    let headerHeight = parseFloat(this.$refs.dialogHeader.getBoundingClientRect().height);
                    this.bodyHeight = this.dlg.height - headerHeight;
                }else this.bodyHeight = this.dlg.height;

                if(this.dlg.type === 'toast'){
                    this.dialogSize = {
                        width: this.dlg.width + 'px',
                        height: this.dlg.height + 'px'
                    }
                }else {
                    if(this.dialogClass.maximize) this.dialogTop = 0;
                    else{
                        let browserHeight = window.innerHeight || document.documentElement.clientHeight;
                        //console.log('browserHeight:',browserHeight);
                        this.dialogTop = (browserHeight - this.dlg.height) / 2;
                        //console.log('dialogTop:',this.dlg.height);
                    }
                }
            }
        },
        mounted(){
            var that = this, dlg = this.dlg;
            this.adjust();

            //z-index step number
            let step = 50;
            this.dialogZIndex = commonConstants.baseZIndex + (step * this.dialogIndex);
            this.backdropZIndex = this.dialogZIndex - 10;

            if(dlg.type === 'alert') {
                switch (dlg.messageType){
                    case messageTypes.error:
                        this.dialogContentClass.vDialogErrorBg = true;
                        break;
                    case messageTypes.warning:
                        this.dialogContentClass.vDialogWarnBg = true;
                        break;
                    case messageTypes.success:
                        this.dialogContentClass.vDialogSuccessBg = true;
                        break;
                }
            }

            //auto close dialog
            if(dlg.type !== 'modal' && dlg.closeTime){
                setTimeout(function(){
                    that.closeDialog(false);
                }, dlg.closeTime * 1000);
            }

            //dialog open animate
            if(dlg.type !== 'toast') {
                this.dialogClass.vDialogOpen = true;
                setTimeout(function(){
                    that.dialogClass.vDialogOpen = false;
                }, 500);
            }
        }
    }
</script>

<style lang="scss" scoped>
    $borderRadius: 2px;
    div.vDialog {
        position: fixed;
        top: 0;right: 0;bottom: 0;left: 0;
        z-index: 1050;
        /*display: none;*/
        overflow: hidden;
        -webkit-overflow-scrolling: touch;
        outline: 0;

        /*border: none;*/
        -webkit-border-radius: $borderRadius;
        -moz-border-radius: $borderRadius;
        border-radius: $borderRadius;

        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        transition: opacity .2s,-webkit-transform .3s;
        transition: transform .3s,opacity .2s;
        transition: transform .3s,opacity .2s,-webkit-transform .3s;

        &.vDialog-open { overflow: hidden; }
        /* Window maximize */
        &.maximize {
            -webkit-border-radius: 0;
            -moz-border-radius: 0;
            border-radius: 0;
            padding-right: 0 !important;
            div.modal-dialog {
                width: 100% !important;
                height: 100% !important;
            }
            div.modal-content {
                height: 100% !important;
                -webkit-border-radius: 0;
                -moz-border-radius: 0;
                border-radius: 0;
            }
        }
        div.modal-dialog {
            position: relative;
            margin: 0 auto;
            width: 100%;
        }
        div.modal-content {
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
            outline: 0;
            position: relative;
            /*	-webkit-box-shadow: 0 5px 30px rgba(0,0,0,0.9);
                box-shadow: 0 5px 30px rgba(0,0,0,0.9);*/

            box-shadow: 0 5px 15px rgba(0,0,0,0.5);
            -moz-box-shadow: 0 5px 15px rgba(0,0,0,0.5);
            -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.5);

            background-color: white;

            -webkit-border-radius: $borderRadius;
            -moz-border-radius: $borderRadius;
            border-radius: $borderRadius;
            border: 0;
        }
        div.modal-header {
            -webkit-border-top-left-radius: $borderRadius;
            -moz-border-top-left-radius: $borderRadius;
            border-top-left-radius: $borderRadius;
            -webkit-border-top-right-radius: $borderRadius;
            -moz-border-top-right-radius: $borderRadius;
            border-top-right-radius: $borderRadius;
            padding: 0;
            background-color: #EEEEEE;
            border-bottom: 0;
            h3 {
                -webkit-border-top-left-radius: $borderRadius;
                -moz-border-top-left-radius: $borderRadius;
                border-top-left-radius: $borderRadius;
                -webkit-border-top-right-radius: $borderRadius;
                -moz-border-top-right-radius: $borderRadius;
                border-top-right-radius: $borderRadius;
                margin: 0;
                line-height: 42px;
                font-size: 18px;
                padding-left: 16px;
            }
            button{
                -webkit-transition: all .5s cubic-bezier(.175,.885,.32,1);
                transition: all .5s cubic-bezier(.175,.885,.32,1);
                height: 42px;
                width: 60px;
                text-shadow: none;
                outline: none !important;
                margin: 0;
                opacity: 0.3;
                font-size: 22px !important;
                float: right;
                border: 0;
                background-color: transparent;
                &:hover { opacity: 1; }
                &.vDialogCloseButton { font-weight: normal; }
                &.vDialogCloseButton:hover { background-color: #E81123; }
                &.vDialogCloseButton:hover i { color: white; }
                &.maximize {
                    /*margin-right: 7px;*/
                    /*margin-top: 2px;*/
                    &:hover { background-color: #E0E0E0; }
                }
                i { font-weight: 600;font-size: 22px; }
            }
        }
        div.modal-body {
            position: relative;
            width: 100%;
            padding: 0;
            overflow: auto;
            -moz-box-sizing: border-box;
            box-sizing: border-box;

            -webkit-border-bottom-left-radius: $borderRadius;
            -moz-border-bottom-left-radius: $borderRadius;
            border-bottom-left-radius: $borderRadius;
            -webkit-border-bottom-right-radius: $borderRadius;
            -moz-border-bottom-right-radius: $borderRadius;
            border-bottom-right-radius: $borderRadius;
            iframe { position: relative;display: block; }
        }
        &.fullWidth {
            width: 100%;
            -webkit-border-radius: 0;
            -moz-border-radius: 0;
            border-radius: 0;
            padding-right: 0;
            div.modal-header {
                -webkit-border-radius: 0;
                -moz-border-radius: 0;
                border-radius: 0;
                background-color: white;
                border-bottom: 0;
                h3 { text-align: center; }
            }
            div.modal-content {
                -webkit-border-radius: 0;
                -moz-border-radius: 0;
                border-radius: 0;
            }
        }
    }
    div.vDialog-backdrop {
        position: fixed;
        top: 0;right: 0;bottom: 0;left: 0;
        z-index: 1040;
        opacity: 0.5;
        background-color: black;
    }



    /* Alert mode style sheet */
    .vDialogAlert{
        background-repeat: no-repeat;
        background-position: 20px 20px;
        min-height: 100%;
        overflow: hidden;
        position: relative;
        &.alertInfo{
            background-image: url("");
        }
        &.alertWarning{
            background-image: url("");
        }
        &.alertError{
            background-image: url("");
        }
        &.alertSuccess{
            background-image: url("");
        }
        &.alertConfirm{
            background-image: url("");
        }
        .messageContent{
            padding-left: 104px;
            padding-top: 23px;
            padding-right: 10px;
            font-size: 14px;
            overflow-y: auto;
            min-height: 100px;
            .inputConfirm{
                width: 100%;
                margin-top: 5px;
                font-size: 14px;
                padding: 3px 6px;
                outline: none !important;
                height: 30px;
                display: block;
                border-radius: 2px;
                border: 1px solid #dddddd;
                box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
                &:focus {
                    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
                    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
                    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
                    border: 1px solid #75B9F0;
                }
                &.inputRequire{ border:1px solid red; }
            }
        }
        .vDialogButtons{
            text-align: right;
            padding: 10px;
            position: absolute;
            bottom: 0;
            right: 0;
            button{
                outline: none !important;
                padding: 8px 15px;
                margin-left: 5px;
                min-width: 90px;
                -webkit-border-radius: $borderRadius;
                -moz-border-radius: $borderRadius;
                border-radius: $borderRadius;
                font-size: 14px;
                -webkit-box-shadow: 0 0 2px rgba(0,0,0,.12), 0 2px 2px rgba(0,0,0,.2);
                box-shadow: 0 0 2px rgba(0,0,0,.12), 0 2px 2px rgba(0,0,0,.2);
                -webkit-transition: all .2s ease-in-out;
                -moz-transition: all .2s ease-in-out;
                transition: all .2s ease-in-out;
                &:active {
                    -webkit-box-shadow: 0 10px 20px rgba(0,0,0,.2), 0 6px 6px rgba(0,0,0,.23);
                    box-shadow: 0 10px 20px rgba(0,0,0,.2), 0 6px 6px rgba(0,0,0,.23);
                }
            }
            .vDialogOk{
                border: 1px solid #516270;
                background-color: #516270;
                color: white;
            }
            .vDialogCancel{
                border: 1px solid #F0F0F0;
                background-color: #F0F0F0;
            }
        }
    }

    .vDialogErrorBg{
        box-shadow: 0 0 30px rgba(255,0,0,0.5) !important;
        -moz-box-shadow: 0 0 30px rgba(255,0,0,0.5) !important;
        -webkit-box-shadow: 0 0 30px rgba(255,0,0,0.5) !important;
    }
    .vDialogWarnBg{
        box-shadow: 0 0 30px rgba(255,165,0,0.5) !important;
        -moz-box-shadow: 0 0 30px rgba(255,165,0,0.5) !important;
        -webkit-box-shadow: 0 0 30px rgba(255,165,0,0.5) !important;
    }
    .vDialogSuccessBg{
        box-shadow: 0 0 30px rgba(0,255,0,0.5) !important;
        -moz-box-shadow: 0 0 30px rgba(0,255,0,0.5) !important;
        -webkit-box-shadow: 0 0 30px rgba(0,255,0,0.5) !important;
    }
    /* Alert mode style sheet */



    /* Mask mode style sheet */
    .vDialogMaskContent{
        background-repeat: no-repeat;
        background-position: 5px 5px;
        min-height: 100%;
        overflow: hidden;
        padding: 7px 5px;
        .messageContent{
            padding-left: 40px;
            padding-top: 0;
            padding-right: 0;
            font-size: 14px;
            overflow-y: auto;
            color: black;
        }
    }
    /* Mask mode style sheet */



    /* Toast mode style sheet */
    div.vDialogToast{
        padding: 0 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.5);
        -moz-box-shadow: 0 2px 8px rgba(0,0,0,0.5);
        -webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.5);
        div.modal-content { box-shadow: none;-moz-box-shadow: none;-webkit-box-shadow: none; }
        div.vDialogBody{ padding: 0; }
        div.modal-dialog{ position: absolute;margin: 0; }
        &.bottomLeft{ bottom: 12px;left: 12px;top: unset;right: unset; }
        &.bottomCenter{ margin-top: 20px;margin-left: 20px; }
        &.bottomRight{ bottom: 12px;right: 12px;top: unset;left: unset; }
        &.topLeft{ top: 12px;left: 12px;right: unset;bottom: unset; }
        &.topCenter{ margin-left: 20px;margin-top: 12px; }
        &.topRight{ top: 12px;right: 12px;left: unset;bottom: unset; }
    }

    div.vDialogToastContent{
        background-repeat: no-repeat;
        background-position: 20px 20px;
        min-height: 100%;
        overflow: hidden;
        position: relative;
        color: #333333;
        &.toastWarning{ background-color: #F5CF87; }
        &.toastError{ background-color: red;color: white;}
        &.toastSuccess{ background-color: #2CBE4E;color: white;}
        &.toastError .vDialogToastClose,
        &.toastSuccess .vDialogToastClose,
        &.toastError h3, &.toastSuccess h3{ color: white !important; }
        .vDialogToastClose{
            position: absolute;
            right: 5px;
            top: 0;
            -webkit-appearance: none;
            padding: 0;
            cursor: pointer;
            background: 0 0;
            border: 0;
            outline: none;
            font-size: 20px;
            line-height: 100%;
            color: #999999;
            &:hover{ color: black; }
        }
        .vDialogToastIcon{
            position: absolute;top:12px;left:15px;
            i{ font-size: 40px; }
        }
        .messageContent{
            padding-left: 70px;
            padding-top: 12px;
            padding-right: 10px;
            font-size: 14px;
            overflow-y: auto;
            min-height: 80px;
            h3{ margin: 0 0 3px 0;font-size: 16px;font-weight: bold;color: black; }
            p{ font-size: 14px;line-height: 1 }
        }
    }
    /* Toast mode style sheet */





    /* The timer animate icon */
    .vDialogTimer{
        position: absolute;left: 10px;top:10px;width: 24px;height: 24px;border: 2px solid #000;
        border-radius: 50%;background-color: transparent;box-sizing: content-box;
        &:after, &:before{ position: absolute;content: '';background-color: #000; }
        &:after{
            top: 11px;left: 11px;width: 10px;height: 2px;
            -webkit-transform-origin: 1px 1px;
            -moz-transform-origin: 1px 1px;
            transform-origin: 1px 1px;
            -webkit-animation: timerhand 2s linear infinite;
            -moz-animation: timerhand 2s linear infinite;
            animation: timerhand 2s linear infinite;
        }
        &:before{
            top: 11px;left: 11px;width: 8px;height: 2px;
            -webkit-transform-origin: 1px 1px;
            -moz-transform-origin: 1px 1px;
            transform-origin: 1px 1px;
            -webkit-animation: timerhand 8s linear infinite;
            -moz-animation: timerhand 8s linear infinite;
            animation: timerhand 8s linear infinite;
        }
    }


    /* css animate */
    @-webkit-keyframes timerhand{
        0%{ -webkit-transform: rotate(0deg); }
        100%{ -webkit-transform: rotate(360deg); }
    }
    @-moz-keyframes timerhand{
        0%{ -webkit-transform: rotate(0deg); }
        100%{ -webkit-transform: rotate(360deg); }
    }
    @-o-keyframes timerhand{
        0%{ -webkit-transform: rotate(0deg); }
        100%{ -webkit-transform: rotate(360deg); }
    }
    @keyframes timerhand{
        0%{ -webkit-transform: rotate(0deg); }
        100%{ -webkit-transform: rotate(360deg); }
    }

    @-webkit-keyframes vDialogOpen {
        0% { transform: scale(0.7);-webkit-transform: scale(0.7); }
        45% { transform: scale(1.05);-webkit-transform: scale(1.05); }
        80% { transform: scale(0.95);-webkit-transform: scale(0.95); }
        100% { transform: scale(1);-webkit-transform: scale(1); } }

    @keyframes vDialogOpen {
        0% { transform: scale(0.7);-webkit-transform: scale(0.7); }
        45% { transform: scale(1.05);-webkit-transform: scale(1.05); }
        80% { transform: scale(0.95);-webkit-transform: scale(0.95); }
        100% { transform: scale(1);-webkit-transform: scale(1); } }

    /* .vDialogOpen div.modal-content */
    .vDialogOpen div.modal-content {
        -webkit-animation: vDialogOpen .3s;
        animation: vDialogOpen .3s;
        will-change: transform;
        animation-timing-function: ease-in-out;
    }

    /* Buzz Out */
    @-webkit-keyframes vDialogBuzzOut {
        10% { -webkit-transform: translateX(3px) rotate(2deg);transform: translateX(3px) rotate(2deg); }
        20% { -webkit-transform: translateX(-3px) rotate(-2deg);transform: translateX(-3px) rotate(-2deg); }
        30% { -webkit-transform: translateX(3px) rotate(2deg);transform: translateX(3px) rotate(2deg); }
        40% { -webkit-transform: translateX(-3px) rotate(-2deg);transform: translateX(-3px) rotate(-2deg); }
        50% { -webkit-transform: translateX(2px) rotate(1deg);transform: translateX(2px) rotate(1deg); }
        60% { -webkit-transform: translateX(-2px) rotate(-1deg);transform: translateX(-2px) rotate(-1deg); }
        70% { -webkit-transform: translateX(2px) rotate(1deg);transform: translateX(2px) rotate(1deg); }
        80% { -webkit-transform: translateX(-2px) rotate(-1deg);transform: translateX(-2px) rotate(-1deg); }
        90% { -webkit-transform: translateX(1px) rotate(0);transform: translateX(1px) rotate(0); }
        100% { -webkit-transform: translateX(-1px) rotate(0);transform: translateX(-1px) rotate(0); }
    }
    @keyframes vDialogBuzzOut {
        10% { -webkit-transform: translateX(3px) rotate(2deg);transform: translateX(3px) rotate(2deg);}
        20% { -webkit-transform: translateX(-3px) rotate(-2deg);transform: translateX(-3px) rotate(-2deg); }
        30% { -webkit-transform: translateX(3px) rotate(2deg);transform: translateX(3px) rotate(2deg); }
        40% { -webkit-transform: translateX(-3px) rotate(-2deg);transform: translateX(-3px) rotate(-2deg); }
        50% { -webkit-transform: translateX(2px) rotate(1deg);transform: translateX(2px) rotate(1deg); }
        60% { -webkit-transform: translateX(-2px) rotate(-1deg);transform: translateX(-2px) rotate(-1deg); }
        70% { -webkit-transform: translateX(2px) rotate(1deg);transform: translateX(2px) rotate(1deg); }
        80% { -webkit-transform: translateX(-2px) rotate(-1deg);transform: translateX(-2px) rotate(-1deg); }
        90% { -webkit-transform: translateX(1px) rotate(0);transform: translateX(1px) rotate(0); }
        100% { -webkit-transform: translateX(-1px) rotate(0);transform: translateX(-1px) rotate(0); }
    }
    /*.vDialog.vDialogBuzzOut div.modal-content {*/
    /*.vDialogBuzzOut {*/
    .vDialogBuzzOut div.modal-content {
        /*    display: inline-block;
            vertical-align: middle;*/
        /*-webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);*/

        -webkit-animation-name: vDialogBuzzOut;
        animation-name: vDialogBuzzOut;
        -webkit-animation-duration: 0.75s;
        animation-duration: 0.75s;/*规定完成动画所花费的时间，以秒或毫秒计*/
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;/*动画从头到尾的速度是相同的*/
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;/*执行次数*/
    }

    @keyframes popIn {
        0% { -webkit-transform: scale3d(0, 0, 0);transform: scale3d(0, 0, 0);opacity: 0; }
        20% { opacity: 1; }
        40% {
            -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
            animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
            -webkit-transform: scale3d(1.08, 1.08, 1.08);
            transform: scale3d(1.08, 1.08, 1.08); }
        60% {
            -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); }
        80% {
            -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            -webkit-transform: scale3d(1.03, 1.03, 1.03);
            transform: scale3d(1.03, 1.03, 1.03); }
        100% {
            -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
            animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
            -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); }
    }
    .popIn div.modal-content {
        -webkit-animation-duration: .4s;
        -webkit-animation-fill-mode: both;
        animation-duration: .4s;
        animation-fill-mode: both;
        animation-timing-function: linear;
        -webkit-animation-name: popIn;
        animation-name: popIn;
    }

    /* icons */
    @font-face {font-family: "iconfont";
        src: url(''); /* IE9*/
        src: url('') format('embedded-opentype'), /* IE6-IE8 */
        url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
        url('') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
        url('') format('svg'); /* iOS 4.1- */
    }

    .vDialogFont {
        font-family:"iconfont" !important;
        font-size:16px;
        font-style:normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .vDialog-toast-success:before { content: "\e657"; }
    .vDialog-toast-error:before { content: "\e659"; }
    .vDialog-toast-warn:before { content: "\e663"; }
    .vDialog-toast-info:before { content: "\e6e5"; }
    .vDialog-close:before { content: "\e604"; }
    .vDialog-max:before { content: "\e67d"; }
    .vDialog-restore:before { content: "\e674"; }
</style>